<template>
  <basePage :show-tabbar="false" :page-params="pageParams">
    <view class="list-bg">
      <view class="pop-title">
        <view class="title">配送方式</view>
        <view
          class="close"
          @click="closePopFn"
        >
          <image
            class="close-icon"
            src="/static/image/close.png"
          />
        </view>
      </view>
      <view class="pop-content">
        <template>
          <view class="title-box">
            <view class="left-title-box">
              最长边{{ (curOrderData.maxLength / 100).toFixed(2) }}米；总体积{{ (curOrderData.goodTotalVolume / 1000000).toFixed(2) == 0.00 ? 0.01 : (curOrderData.goodTotalVolume / 1000000).toFixed(2) }}立方米；重量{{ (curOrderData.goodTotalWeight / 1).toFixed(2) }}公斤
            </view>
          </view>
          <scroll-view class="item-content" scroll-x="true">
            <view
              v-for="(item, index) in curOrderInfo.deliverWayList"
              :key="index"
              :class="deliverWay == item.code ? 'class-item-select class-item' : 'class-item'"
              @click="selectItemFn('deliverWay', item.code)"
            >
              {{ item.deliverWayText }}
            </view>
          </scroll-view>
          <view class="item-content">
            <view
              v-for="(item, index) in tabList"
              :key="index"
              :class="navTabCur == item.id ? 'class-item-select class-item' : 'class-item'"
              @click="tabFn(item)"
            >
              {{ item.text }}
            </view>
          </view>
        </template>
        <view class="deliver-way-content">
          <SelectDeliverWayTime :list-data="listData" :nav-tab-cur="navTabCur" @checkTime="checkTime" />
        </view>
      </view>
      <view class="btn-box">
        <button class="btn confirm-btn" :plain="true" @click.s.stop="$u.throttle(confirmFn, 500)">确定</button>
      </view>
    </view>
  </basePage>
</template>

<script>
import basePage from '@/components/base-page'
import SelectDeliverWayTime from './select-deliverWay-time.vue'
export default {
  components: {
    basePage,
    SelectDeliverWayTime
  },
  props: {
    orderInfo: {
      type: Object,
      default: null
    },
    orderData: {
      type: Object,
      default: null
    },
    freight: {
      type: Number,
      default: 0
    },
    curDeliverWay: { // 当前选择的配送方式，并不代表最终入参
      type: String,
      default: ''
    },
    setDeliverWayFn: { //转化配送kd=='快递'
      type: Function,
      default: null
    },
    listData: { // 配送时间数据
      type: Object,
      default: null
    }
  },
  data() {
    return {
      title: 'Index',
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
      deliverWay: '',
      lastSelectTime: {},
      oldData: {},
      selfInfo: {},
      navTabCur: 0,
      tabList: [
        {
          id: '0',
          text: '任何时间均接受送货'
        },
        {
          id: '1',
          text: '仅工作日接受送货'
        }
      ],
      checkDataTime: {},
    }
  },
  computed: {
    curOrderInfo() {
      const hasNoStorePack = this.orderInfo.deliverWayList.filter(item => item.code !== 'zt')
      return { ...this.orderInfo, deliverWayList: hasNoStorePack }
      // return this.orderInfo
    },
    curOrderData() {
      return this.orderData
    },
    curFreight() {
      return this.freight
    },
    defaultDeliverWay() {
      return this.curDeliverWay
    },
    coumtedListData() {
      return this.listData
    }
  },
  watch: {
    coumtedListData: {
      handler(newVal, oldVal) {
        if (newVal.deliveryDate) {
          console.log('newValnewValnewVal', newVal);
          this.checkDataTime.changeDate = newVal.deliveryDate
          this.checkDataTime.changeTime = newVal.deliveryTime
        }
      },
      deep: true
    }
  },
  mounted() {
    this.oldData = { ...this.curOrderInfo }
    this.deliverWay = this.defaultDeliverWay || this.curOrderInfo.deliverWay
    //如果是默认数据 打开之后没有选择 直接点击确定按钮 订单页面应该显示默认数据
    this.checkDataTime.deliverWay = this.deliverWay
    this.checkDataTime.changeDate = this.coumtedListData.deliveryDate
    this.checkDataTime.changeTime = this.coumtedListData.deliveryTime
  },
  methods: {
    checkTime(val) {
      this.checkDataTime.deliverWay = this.deliverWay
      this.checkDataTime.changeDate = val.changeDate
      this.checkDataTime.changeTime = val.changeTime
    },

    /*选择tab操作*/
    tabFn(val) {
      this.navTabCur = val.id
    },
    /*选择配送方式 按钮方法*/
    selectItemFn(typeName, val) {
      this.checkDataTime.deliverWay = val
      this.$emit('update:curDeliverWay', val)
      this[typeName] = val
      this.$emit('selectFn', val)
      this.$emit('initDataTime', this.checkDataTime)
    },
    /*自提信息整理*/
    getSelfInfoFn(selfInfo) {
      this.selfInfo = selfInfo
    },
    /*确认*/
    confirmFn() {
      this.$emit('update:orderInfo', this.curOrderInfo)
      this.$emit('initDataTime', this.checkDataTime)
      // this.$emit('selectFn', this.checkDataTime, 1)//更新价格 需要重新赋值deliverWay
      this.close()
    },
    closePopFn() {
      this.close()
    },
    close() {
      this.$emit('initDataTime', this.checkDataTime)
      this.$emit('closePopFn')
    },
    /*pop打开*/
    showPopFn(obj) {
      this.$emit('showPopFn', obj)
    },
  }
}
</script>

<style scoped lang="scss">
@import "../static/scss/index";
.list-bg{
  height: 1122rpx;
  .item-content{
    height: 74rpx;
    padding-bottom: 32rpx;
    border-bottom: 2rpx solid $uni-f5bg-color;
    width: 100%;
    white-space: nowrap;
  }
}

</style>
